// 商家销售统计的横向柱状图
<template>
  <div class="com_container">
    <div class="com_chart" ref="seller_page"></div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: "Seller",
  data() {
    return {
      dom: null, // 挂载图表容器的实例对象
      data: null, // 服务器中获取的数据
      currentPage: 1, // 当前第几页
      totalPage: 0, // 总页数
      timerId: null, // 定时器的标识
      titleAdaptData: null  // 标题适配的数据
    };
  },
  // 模板渲染成html后调用
  mounted() {
    this.initChart(); // 初始化图表
    window.addEventListener('resize', this.screenAdapt)
    this.screenAdapt()
  },
  // 组件销毁后
  destroyed() {
    clearInterval(this.timerId); // 关闭定时器
    window.removeEventListener('resize', this.screenAdapt)  // 移除这个事件
  },
  methods: {
    // 初始化echart实例(lnstance)对象
    initChart() {
      this.dom = this.$echarts.init(this.$refs.seller_page, this.theme);
      // 鼠标移入
      this.dom.on("mouseover", () => {
        clearInterval(this.timerId);
      });
      // 鼠标移出
      this.dom.on("mouseout", () => {
        this.openIntarval();
      });
      this.getData();
    },
    // 获取服务器的数据
    getData() {
      this.$http.get("/api/seller").then(({ data }) => {
        // 把数据解构出来
        this.data = data;
        // 对数据进行从小到大排序
        this.data.sort((a, b) => {
          return a.value - b.value; // a-b从小到大 b-a从大到小
        });
        // 总共多少页(每5条数据显示一页)
        this.totalPage =
          this.data.length % 5 === 0
            ? this.data.length / 5
            : this.data.length / 5 + 1;
        this.updateChart();
        this.openIntarval();
      });
    },
    // 更新图表视图
    updateChart() {
      let start = (this.currentPage - 1) * 5;
      let end = this.currentPage * 5;
      let showData = this.data.slice(start, end); // 这这方法包含start,但不包含end
      // name
      let name = showData.map((item) => item.name);
      let value = showData.map((item) => item.value);
      // 配置项
      let option = {
        title: {
          text: "▎商家销售统计",
          textStyle: {
            // 标题的样式
            fontSize: this.titleAdaptData * 1.2,
            fontWeight: 900
          },
          left: 25, // title 组件离容器左侧的距离。
          top: 20,
        },
        grid: {
          left: "4%",
          top: "17%",
          right: "7%",
          bottom: "5%",
          containLabel: true, // 距离是包含坐标轴上的文字
        },
        tooltip: {
          trigger: 'axis', // 触发类型
          axisPointer: {  // 坐标轴指示器配置项
            type: 'line',
            z: 0, // 控制图形的前后顺序
            lineStyle: {
              width: this.titleAdaptData,
              color: '#2D3443'
            }
          }
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          data: name,
        },
        series: [
          {
            type: "bar",
            data: value,
            barWidth: this.titleAdaptData, // 柱条的宽度
            label: {
              show: true,
              position: "right",
              color: "#fff",
            },
            itemStyle: {
              barBorderRadius: [0, this.titleAdaptData / 2, this.titleAdaptData / 2, 0],
              color: {
                type: "linear", // 线性渐变
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "#5052EE", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#AB6EE5", // 100% 处的颜色 aqua
                  },
                ],
              },
            },
          },
        ],
      };
      this.dom.setOption(option);
    },
    // 启动定时器
    openIntarval() {
      // 如果开启定时器则就关闭定时器
      if (this.timerId) {
        clearInterval(this.timerId);
      }
      this.timerId = setInterval(() => {
        this.currentPage++;
        // 边界值的处理
        if (this.currentPage > this.totalPage) {
          this.currentPage = 1;
        }
        this.updateChart();
      }, 1000);
    },
    // 当浏览器大小发生变化时，就要让图表适配屏幕
    screenAdapt() {
      this.titleAdaptData = this.$refs.seller_page.offsetWidth / 100 * 3.6
      this.dom.resize()
    }
  },
  computed: {
    ...mapState(['theme'])
  },
  watch: {
    theme() {
      this.dom.dispose() // 销毁当前的图表
      this.initChart()  // 重新以最新的主题名称初始化图表对象
      this.screenAdapt()  // 完成屏幕的适配
      this.updateChart()  // 更新图表的展示
    }
  }
};
</script>

<style lang="less" scoped>
</style>